<template>
  <view class="screen-box">
    <view class="screen">
      <view class="flex-column-center" @click="
        showType = 'area';
      overlay_show = true;
      "><text class="mr-12 fs-30" :class="{ 'text-active': overlay_show && showType == 'area' }">区域</text>
        <block>
          <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="overlay_show && showType == 'area'">
          </image>
          <image src="/static/svg/arrow-down.svg" class="w-20 h-12" v-else></image>
        </block>
      </view>
      <view class="flex-column-center" @click="handleSort('distance')">
        <text class="mr-12 fs-30" :class="{ 'text-active': distanceSort !== '' }">距离</text>
        <view class="price-arrows">
          <image src="/static/svg/arrow-up-active.svg" class="w-20 h-12" v-if="distanceSort === 'asc'"></image>
          <image src="/static/svg/arrow-up.svg" class="w-20 h-12" v-else></image>
          <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="distanceSort === 'desc'"></image>
          <image src="/static/svg/arrow-down2.svg" class="w-20 h-12" v-else></image>
        </view>
      </view>
      <view class="flex-column-center" @click="handleSort('views')">
        <text class="mr-12 fs-30" :class="{ 'text-active': viewsSort !== '' }">浏览量</text>
        <view class="price-arrows">
          <image src="/static/svg/arrow-up-active.svg" class="w-20 h-12" v-if="viewsSort === 'asc'"></image>
          <image src="/static/svg/arrow-up.svg" class="w-20 h-12" v-else></image>
          <image src="/static/svg/arrow-down-active.svg" class="w-20 h-12" v-if="viewsSort === 'desc'"></image>
          <image src="/static/svg/arrow-down2.svg" class="w-20 h-12" v-else></image>
        </view>
      </view>
    </view>
    <view class="popup" v-if="overlay_show">
      <AreaScreen v-if="showType === 'area'" :list="areaData" :checkIds="areaCheckIds" @changeCheck="areaChangeCheck">
      </AreaScreen>
      <view class="popup-btns">
        <u-button :customStyle="btnStyle" @click="onReast">重置</u-button>
        <u-button :customStyle="{ ...btnStyle, background: '#C5261D', color: '#fff' }" @click="onSubmit">确定</u-button>
      </view>
    </view>
  </view>
</template>
<script>
import AreaScreen from "@/components/AreaScreen.vue";
import { areaListApi } from "@/services/common";
export default {
  data() {
    return {
      showType: "area",
      overlay_show: false,
      btnStyle: {
        width: "328rpx",
        height: "80rpx",
        borderRadius: "12rpx",
        background: "#F7F8FA",
        border: "none",
      },
      areaData: [],
      areaCheckIds: [],
      cateCheckIds: [],
      brandCheckIds: [],
      priceCheckIds: [],
      moreCheckIds: [],
      distanceSort: "", // '' = default, 'asc' = 升序, 'desc' = 降序
      viewsSort: "",
    };
  },
  props: {
    cate: String,
  },
  watch: {
    overlay_show(val) {
      this.$emit("overlay_show", val);
    },
    cate() {
      this.getTagList();
    },
  },
  components: { AreaScreen },
  mounted() {
    areaListApi().then((res) => {
      this.areaData = res.data?.area_list || [];
    });
  },
  methods: {
    //手动设置公寓条件
    setApartment() {
      this.moreCheckIds = [{ key: "kinds", ids: ["公寓"] }];
      this.onSubmit();
    },
    getTagList() {
      tagsListApi({ cate: Number(this.cate) }).then((res) => {
        this.moreList[this.moreList.length - 1].list = res.data || [];
      });
    },
    areaChangeCheck(e, names) {
      this.areaCheckIds = e;
      console.log(names);
      // this.areaNames = names;
    },
    priceChangeCheck(e) {
      this.priceCheckIds = e;
    },
    cateChangeCheck(e) {
      this.cateCheckIds = e;
    },
    brandChangeCheck(e) {
      this.brandCheckIds = e;
    },
    moreChangeCheck(e) {
      this.moreCheckIds = this.moreCheckIds.filter(
        (item) => item.key !== e.key
      );
      this.moreCheckIds.push(e);
    },
    onReast() {
      this.areaCheckIds = [];
      this.priceCheckIds = [];
      this.moreCheckIds = [];
      this.distanceSort = "";
      this.$emit("onReast");
      this.overlay_show = false;
    },
    onSubmit() {
      this.$emit("onSearch", {
        area: this.areaCheckIds,
        distance: this.distanceSort,
        views: this.viewsSort,
      });
      this.overlay_show = false;
    },
    handleSort(type) {
      const sortKey = type + "Sort";

      // 循环切换排序状态: 默认 -> 升序 -> 降序 -> 默认
      if (this[sortKey] === "") {
        this[sortKey] = "asc";
      } else if (this[sortKey] === "asc") {
        this[sortKey] = "desc";
      } else {
        this[sortKey] = "";
      }

      // 重置其他排序
      if (type === "distance") {
        this.viewsSort = "";
      } else if (type === "views") {
        this.distanceSort = "";
      }

      // 关闭弹窗
      this.overlay_show = false;

      // 触发搜索
      this.$emit("onSearch", {
        area: this.areaCheckIds,
        [type]: this[sortKey],
        more: this.moreCheckIds,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.screen-box {
  position: relative;
}

.screen {
  height: 80rpx;
  background: #ffffff;
  border: 1px solid #eee;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .text-active {
    color: $theme-color;
  }
}

.popup {
  z-index: 90999;
  position: absolute;
  top: 84rpx;
  left: 0;
  right: 0;
  // min-height: 500rpx;
  background: #ffffff;

  .popup-btns {
    height: 136rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.price-arrows {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
}
</style>